<template>
  <div class="wrapper">
    <!-- 轮播 -->
    <swiper :options="swiperOptions">
      <swiper-slide v-for="item of List" :key="item.id ">
        <img class="swiper-img" :src="item.imgUrl"/>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: "HomeSwiper",
  props : {
    List:Array
  },
  data() {
    return {
      swiperOptions: {
          pagination:'.swiper-pagination',
          loop:true //循环轮番
      }
    }
  }
}
</script>
<style scoped>
/* 让图片上小圆点变成白色 */
.wrapper >>> .swiper-pagination-bullet-active{
    background-color: #fff;
}
.wrapper{
    overflow: hidden;
    width: 100%;
    height: 0;
    padding-bottom:31.25% ;
}
.swiper-img{
    width: 100%;
}
</style>